<template>
	<view>
		<u-navbar title="回收单详情" autoBack="true" bgColor="transparent" :titleStyle="{fontSize:'36rpx',fontWeight:'500'}">
		</u-navbar>
		<scroll-view class="container" scroll-y="true">
			<view class="otitle">
				<view class="left">
					<u--text :text="'订单编号：'+order.no_recycle" size="14" color="#333" margin="0 0 28rpx 0"></u--text>
					<u--text :text="order.person+'  '+order.datetime_recycle" size="10" color="#999999"></u--text>
				</view>
				<view class="right">
					<view class="customTag" :class="type_tags[order.state_recycle]">
						<text>{{type_status[order.state_recycle]}}</text>
					</view>
				</view>
			</view>
			<u--text text="预计收款方式: 公对公" size="14" color="#333" margin="32rpx 0 40rpx 0"></u--text>
			<u--text text="预回收产品:" size="14" color="#333" margin="0 0 40rpx 0"></u--text>
			<view class="p_list">
				<u--text :text="'总计: '+order.amount_pay+'元(含13%增值税)'" size="13" color="#333"
					margin="0 0 20rpx 0"></u--text>
				<view class="pitem">
					<u--text :text="'循环托盘 '+order.category2+' A类'" size="13" color="#333"
						margin="0 0 20rpx 0"></u--text>
					<u--text :text="computeA" size="13" color="#646464" margin="0 0 20rpx 0"></u--text>
				</view>
				<view class="pitem">
					<u--text :text="'循环托盘 '+order.category2+' B类'" size="13" color="#333"
						margin="0 0 20rpx 0"></u--text>
					<u--text :text="computeB" size="13" color="#646464" margin="0 0 20rpx 0"></u--text>
				</view>
				<view class="pitem">
					<u--text :text="'循环托盘 '+order.category2+' C类'" size="13" color="#333"
						margin="0 0 20rpx 0"></u--text>
					<u--text :text="computeC" size="13" color="#646464" margin="0 0 20rpx 0"></u--text>
				</view>
			</view>
			<view class="explanation">
				<u--text lineHeight="20" size="10" color="#979797" text="说明:"></u--text>
				<u--text lineHeight="20" size="10" color="#979797"
					text="目前我司仅接收公对公打款，收款时您需开具相应的增值税发票(13%税点);"></u--text>
				<!-- <u--text lineHeight="20" size="10" color="#979797" text="选择公对公收款方式，您需要给我司开具对应的增值税发票(13%税率);"></u--text>
				<u--text lineHeight="20" size="10" color="#979797" text="若选择公对私收款方式，将会在上述总计金额的基础上扣除13%的税费;"></u--text> -->
			</view>
			<view class="actual_recycling" v-if="order.state_recycle==='04'">
				<u--text text="收款方式: 公对公" size="14" color="#333" margin="32rpx 0 40rpx 0"></u--text>
				<u--text text="实际收产品:" size="14" color="#333" margin="0 0 40rpx 0"></u--text>
				<view class="p_list">
					<u--text :text="'总计: '+order.amount_pay+'元(含13%增值税)'" size="13" color="#333"
						margin="0 0 20rpx 0"></u--text>
					<view class="pitem">
						<u--text :text="'循环托盘 '+order.category2+' A类'" size="13" color="#333"
							margin="0 0 20rpx 0"></u--text>
						<u--text :text="computeA" size="13" color="#646464" margin="0 0 20rpx 0"></u--text>
					</view>
					<view class="pitem">
						<u--text :text="'循环托盘 '+order.category2+' B类'" size="13" color="#333"
							margin="0 0 20rpx 0"></u--text>
						<u--text :text="computeB" size="13" color="#646464" margin="0 0 20rpx 0"></u--text>
					</view>
					<view class="pitem">
						<u--text :text="'循环托盘 '+order.category2+' C类'" size="13" color="#333"
							margin="0 0 20rpx 0"></u--text>
						<u--text :text="computeC" size="13" color="#646464" margin="0 0 20rpx 0"></u--text>
					</view>
				</view>
			</view>
			<view class="user_info">
				<u--text prefixIcon="map" iconStyle="font-size: 28rpx;margin-right:16rpx;" size="12" color="#333"
					:text="order.address"></u--text>
				<u--text prefixIcon="phone" iconStyle="font-size: 28rpx;margin-right:16rpx;" margin="24rpx 0 0"
					size="12" color="#333" :text="order.person+order.mobile"></u--text>
			</view>
			<u--text margin="52rpx 0" size="14" color="#333" text="附件:"></u--text>
			<view class="imglist">
				<u--image v-for="(item, index) in images" :key="index" :src="[item]" width="200rpx" height="200rpx"
					mode="aspectFill" @tap="previewImage(index)" :custom-style="{marginRight:'20rpx'}"></u--image>
			</view>
			<u--text margin="52rpx 0" size="14" color="#333" text="备注信息:"></u--text>
			<u--text size="13" color="#646464" lineHeight="24" :text="order.remark"></u--text>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getOrderDetail
	} from "@/api/user.js";
	import {
		getImg
	} from "@/api/index.js";
	export default {
		computed: {
			computeA() {
				return this.order ? '回收单价' + this.order.price_recycle_a + '元/块' + this.order.price_recycle_a + '*' + this
					.order
					.num_recycle_a + '=' + this.order.price_recycle_a * this.order.num_recycle_a + '元' : '';
			},
			computeB() {
				return this.order ? '回收单价' + this.order.price_recycle_b + '元/块' + this.order.price_recycle_b + '*' + this
					.order
					.num_recycle_b + '=' + this.order.price_recycle_b * this.order.num_recycle_b + '元' : '';
			},
			computeC() {
				return this.order ? '回收单价' + this.order.price_recycle_c + '元/块' + this.order.price_recycle_c + '*' + this
					.order
					.num_recycle_c + '=' + this.order.price_recycle_c * this.order.num_recycle_c + '元' : '';
			},
		},
		data() {
			return {
				order: null,
				// 当前预览的图片索引
				currentIndex: 0,
				// 是否显示预览组件
				showPreview: false,
				type_status: {
					'00': "待审核",
					"01": "已驳回",
					"02": "已取消",
					"03": "已确认",
					"04": "已完结"
				},
				type_tags: {
					'00': "warningTag",
					"01": "errorTag ",
					"02": "cancelTag",
					"03": "primaryTag",
					"04": "successTag"
				},
				images: []
			};
		},
		onLoad: function(option) {
			if (option.id) {
				getOrderDetail({
					id: option.id
				}).then(res => {
					this.order = res.data[0];
					let imgIds = this.order.file_id.split(",");
					imgIds.forEach(imgid => {
						this.images.push(getImg(imgid))
					})
				}).catch(err => {
					console.error(err)
				})
			} else {
				uni.navigateTo({
					url: "pages/recycle/recycling_forms"
				})
			}
		},
		methods: {
			// 处理图片点击事件
			previewImage(index) {
				uni.previewImage({
					current: this.order.images[index], // 当前显示图片的链接，默认是第一个
					urls: this.order.images, // 需要预览的图片链接列表
					indicator: 'number', // 显示底部指示器，可选值：'number' | 'none'
					longPressActions: { // 长按操作
						itemList: ['保存图片', '识别图中二维码'],
						success: function(data) {
							console.log('选中的按钮：' + data.tapIndex);
							console.log('选中的菜单项：' + data.menuIndex);
						},
						fail: function(err) {
							console.error(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.otitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid rgba(237, 237, 237, 0.9);
		padding-bottom: 32rpx;
		margin-bottom: 32rpx;

		.left {}

		.right {
			flex-shrink: 0;
			flex-grow: 0;
			width: 148rpx;
		}
	}

	.p_list {
		padding: 0 24rpx;

		.pitem {
			padding: 20rpx 0;
		}
	}

	.explanation {
		margin: 80rpx auto 52rpx;
	}

	.imglist {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.actual_recycling {
		padding-bottom: 56rpx;
	}
</style>
